<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
    <script src="../../packages/react/framework7-react.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script type="text/babel">
      class AppComponent extends React.Component {
        constructor() {
          super();
      
          this.state = {
            items: [
              {
                title: 'Yellow Submarine',
                author: 'Beatles',
                cover: 'http://lorempixel.com/88/88/abstract/1',
              },
              {
                title: 'Don\'t Stop Me Now',
                author: 'Queen',
                cover: 'http://lorempixel.com/88/88/abstract/2',
              },
              {
                title: 'Billie Jean',
                author: 'Michael Jackson',
                cover: 'http://lorempixel.com/88/88/abstract/3',
              },
            ],
            songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
            authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'],
          };
        }
        loadMore(event, done) {
          const self = this;
          setTimeout(() => {
            const { items, songs, authors } = self.state;
            const picURL = `http://lorempixel.com/88/88/abstract/${Math.round(Math.random() * 10)}`;
            const song = songs[Math.floor(Math.random() * songs.length)];
            const author = authors[Math.floor(Math.random() * authors.length)];
            items.push({
              title: song,
              author,
              img: picURL,
            });
            self.setState({ items });
      
            done();
          }, 1000);
        }
        render() {
          return (
            <App>
              <View main>
                <Page ptr onPtrRefresh={this.loadMore.bind(this)}>
                  <Navbar title="Pull To Refresh"></Navbar>
                  <List mediaList>
                    {this.state.items.map((item, index) => (
                      <ListItem
                        key={index}
                        title={item.title}
                        subtitle={item.author}
                      >
                        <img slot="media" src={item.cover} width="44" />
                      </ListItem>
                    ))}
                    <BlockFooter>
                      <p>Just pull page down to let the magic happen.<br />Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.</p>
                    </BlockFooter>
                  </List>
                </Page>
              </View>
            </App>
          )
        }
      }
    </script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7React, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7React, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      window.onload = function () {
        if (typeof AppComponent !== 'undefined') {
          ReactDOM.render(
            React.createElement(AppComponent),
            document.getElementById('app')
          );
        }
      }
    </script>
  </body>
</html>